<template>
	<van-row justify="space-between" v-show="!ipputshow">
	  <van-col span="20">
		  <van-tabs v-model:active="title.subjectID" @change="search">
			<van-tab title="全部" name="-99"></van-tab>
			<van-tab  v-for="item in subjects" :title="item.name" :name="item.subjectID"></van-tab>
		  </van-tabs>
	  </van-col>
	  <van-col span="4">
			<div style="text-align: center;line-height: 42px">
				<van-divider vertical style="margin-left: -10px;margin-top: -2px;"/> 
				<van-icon name="search" size="22px" style="margin-top: 16px;margin-left: 10px;font-weight: bold;" @click="ipputshow=true"/>
			</div>
	  </van-col>
	</van-row>
	
	<van-row justify="space-between" v-show="ipputshow">
	  <van-col span="24">
		  <van-search v-model="title.key" placeholder="请输入搜索关键词" :show-action="true">
			<template #action>
				 <div> <span @click="search">搜索</span>  <span style="margin-left: 12px;" @click="cancel()">取消</span></div>
		    </template>
		  </van-search>
	  </van-col>
	</van-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps<{
	  title: {subjectID:number;key:string};
}>();
const ipputshow=ref(false);
const emit = defineEmits(['update:title','search']);
function cancel(){
	props.title.key="";
	ipputshow.value=false;
	search();
}
function search(){
	emit("search");
}

const subjects=[
	{
		name:"语文",
		subjectID:1
	},
	{
		name:"数学",
		subjectID:2
	},
	{
		name:"英语",
		subjectID:3
	},
	{
		name:"政治",
		subjectID:4
	},
	{
		name:"历史",
		subjectID:8
	},
	{
		name:"地理",
		subjectID:9
	},
	{
		name:"物理",
		subjectID:10
	},
	{
		name:"化学",
		subjectID:11
	},
	{
		name:"生物",
		subjectID:13
	},
];

</script>

<style>
</style>